<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左转右转</title>
    <style>
        .box {
            width: 500px;
            display: flex;
            justify-content: space-between;
        }
        
        .foot {
            width: 500px;
            height: 500px;
            margin-top: 20px;
            position: relative;
        }
        
        .foot img {
            visibility: hidden;
            position: absolute;
            top: 100px;
            left: 100px;
            transform-origin: center center;
        }
        
        .foot img:target {
            visibility: visible;
        }
        
        #img1:target {
            transform: scale(1);
        }
        
        #img2:target {
            transform: scale(0.5);
        }
        
        #img3:target {
            transform: rotate(-90deg);
        }
        
        #img4:target {
            transform: rotate(90deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#img1">放大</a>
        <a href="#img2">缩小</a>
        <a href="#img3">左转</a>
        <a href="#img4">右转</a>
    </div>
    <div4 class="foot">
        <img id="img1" src="../c3动画作业//Images/jd_logo.png" alt="">
        <img id="img2" src="../c3动画作业//Images/jd_logo.png" alt="">
        <img id="img3" src="../c3动画作业//Images/jd_logo.png" alt="">
        <img id="img4" src="../c3动画作业//Images/jd_logo.png" alt="">
    </div4>
</body>

</html>